/* 初始化================================================开始 */
* {
    margin: 0px;
    padding: 0px;
}
img {
    object-fit: cover;
}
a {
    text-decoration: none;
    color: #fff;
}
li {
    list-style: none;
}
html {
    font-size: 16px;
}
section,
div,
ul,
li {
    box-sizing: border-box;
}
h2,
h3,
h4,
h5{
    color: rgb(255, 255, 255);
    font-weight: 100;
}
.clearFloat::after {
    content: '';
    display: block;
    clear: both;
}
/* 初始化================================================结束 */
body {
    font-size: 0.9rem;
    background-position: center center;
    background-size: cover;
    height: 100vh;
    color:rgb(153, 153, 153);
}
/* 该区域的样式在任何设备下都是一样的 */
.box {
    width: 100%;
    height: 100%;
}
header {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
header::after, 
header::before {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    bottom: 0px;
}
header::before {
    z-index: -2;
    background: url('../images/header_bg.jpg') no-repeat;
    background-position: center;
    background-size: cover;
    background-position-y: 100%;
}
/* 头部大图背景色 */
header::after {
    z-index: -1;
    background: url('../images/header_bottom_bg.png') repeat-x;
    background-size: cover;
}


.headerTop{
    position: fixed;
    z-index: 999;
    width: 100%;
    padding: 10px 15px;
}
.logo {
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: 50%;
}
.menu {
    position: relative;
    background: url('../images/菜单.png') no-repeat center center;
    background-size: 50%;
}
.menu:hover {
    cursor:pointer;
}
/* 菜单打开状态样式 */
.menuOpen {
    background: url('../images/错误.png') no-repeat center center;
    background-size: 50%;
}
nav {
    background-color: rgb(2, 20, 32);
}
nav ul li:hover {
    cursor:pointer;
    font-weight: bold;
}

/* 首屏标题容器 */
.posterContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 767px;
    height: 100%;
    margin: 0px auto;  
    padding: 30px;
}
.posterTitle{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.posterTitle h3 {
    font-size: 40px;
    letter-spacing:5px;
    padding-bottom: 50px;
}
.titleDescription {
    color: rgb(209, 209, 209);
    padding-bottom: 50px;
}
.posterBtn{
    /* background-color: aquamarine; */
    display: flex;
    justify-content: center;
}
.posterBtn a{
    display: block;
    width: 182px;
    height: 57px;
    line-height: 57px;
    margin: 0px 10px;
    border: 1px solid rgba(204, 204, 204, 0.2);
    border-radius: 2px;
    font-weight: bold;
    transition: background-color .8s;
}
.posterBtn a::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    /* background-color: rgb(73, 42, 42); */
    vertical-align: middle;
    margin-left: 7px;
    background-size: 100%;
    background-position: center;
}
.readMore::after {
    background: url('../images/阅读.png') no-repeat;
}
.contactUs::after {
    background: url('../images/纸飞机.png') no-repeat;
}
.posterBtn a:hover{
    background-color: #428bca;
}
/* 艺术理念容器 */
.liNianContainer {
    width: 100%;
    background-color: rgb(2, 20, 32);
    /* background-image: url('../images/liNianContainer_bg.png'); */
    padding-top: 30px 0px;
}
.liNian {
    display: flex;
    width: 80%;
    margin: 0px auto;
}
.liNianBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    
}
.LiNianDirectionTitle span{
    color: #428bca;
}
/* 按钮样式 */
.btn {
    display: block;
    width: 182px;
    height: 57px;
    line-height: 57px;
    box-sizing: border-box;
    border: 1px solid rgba(204, 204, 204, 0.2);
    border-radius: 2px;
    font-weight: bold;
    text-align: center;
    transition: background-color .8s;
}
.btn:hover {
    background-color: #428bca;
}
.btn::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 7px;
    background: url('../images/阅读.png') no-repeat;
    background-size: 100%;
}
.selectBox::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 7px;
    vertical-align: middle;
    background: url('../images/选择框.png') no-repeat;
    background-size: 100%;
}
/* 第三个按钮的样式 */
.btn_03 {
    background-color: rgba(0,31,51,1);
    border: none;
}
/* 资讯中心 */
.NewContainer {
    background-color: rgb(2, 20, 32);
    padding-bottom: 80px;
}
.NewTitle > span{
    color: rgb(66, 139, 202);
}
/* 用户和日期 */
.NewContent li > p{
    margin-top: 15px;
}

.NewContent li > p > span:nth-child(2){
    margin-left: 30px;
}
.NewContent li > p > span::before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: sub;
    background-position: center;
    margin-right: 5px;
}
.NewContent li > p > span:nth-child(1)::before{
    background: url('../images/用户.png') no-repeat;
    background-size: 100%;
}
.NewContent li > p > span:nth-child(2)::before{
    background: url('../images/时间.png') no-repeat;
    background-size: 100%;
}
.newprojectDescribe h5{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #ccc;
    font-weight: 100;
}
.NewContent ul li>a> img{
    object-fit: cover;
}
/* 咨询区域 每个咨询项的文本段落 */
.newprojectDescribe p{
    line-height: 2em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* 咨询区域的按钮 */
.newBtn {
    display: inline-block;
    color: #428bca;
    margin-top: 15px;
    height: 32px;
    line-height: 32px;
}
.newBtn::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: sub;
    background: url('../images/书.png') no-repeat;
    background-size: 100%;
    margin-right: 5px;
}
/* 服务支持********************************************************** 开始*/
.serviceContainer {
    position: relative;
}
/* 遮罩层 */
.mask {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    background-color: rgba(8, 16, 32, 0.6);
}
.serviceBox {
    position: relative;
    z-index: 2;
    margin: 0px auto;
}
.serviceTitle h4{
    font-size: 1.8rem;
}
.serviceTitle span{
    display: block;
    color: rgb(66, 139, 202);
    margin-top: 5px;
}
.serviceObj ul{
    font-size: 0px;
}
.serviceObj ul li{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    font-size: 0.8rem;
}
.serviceIco1,
.serviceIco2,
.serviceIco3,
.serviceIco4{
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.678);
    background-image: url('../images/定制.png');
    background-repeat: no-repeat;
    background-size: 55%;
    background-position: center;
}
.serviceIco2 {
    background-image: url('../images/影视.png');
}
.serviceIco3 {
    background-image: url('../images/包装.png');
}
.serviceIco4 {
    background-image: url('../images/相机.png');
}
.serviceObj h6{
    font-size: 1.2rem;
    font-weight: 100;
    margin-top: 25px;
    color: rgb(219, 219, 219);
}
.serviceObj p {
    margin-top: 15px;
    font-size: 0.9rem;
    line-height: 2em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* 精品案例 */
.caseContainer {
    padding-top: 50px;
}
/* 轮播图过渡 */
.gd {
    transition: all 1s;
}
.LBTbox {
    /* width: 100vw; */
    position: relative;
}

.photoWall {
    padding-top: 30px;
    background-color: rgb(2, 20, 32);
}
.photoWallTitle {
    text-align: center;
}
.photoWallTitle h4{
    color: #fff;
    font-size: 1.8rem;
}
.photoWallTitle span {
    display: inline-block;
    margin-top: 8px;
    color: rgb(66, 139, 202);
}
.photoWallTitle p {
    display: inline-block;
    width: 75%;
    margin: 30px auto 30px auto;
    line-height: 2.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.photo ul li{
    height: 40vh;
}
.photo ul li img{
    width: 100%;
    height: 40vh;
    object-fit: cover;
}
.photo {
    position: relative;
}
.photo::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url('../images/header_bottom_bg.png') no-repeat;
    background-position: center;
    background-size: cover;
    background-position-y: 100%;
}
.explain {
    background-color: rgb(2, 20, 32);
    padding: 50px 0px;
}
.explain img {
    width: 100px;
}
.bootomNav li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid rgb(66, 139, 202);
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
    margin-right: 10px;
}
.statement {
    border-top: 1px solid rgb(170, 170, 170);
    padding: 20px 0px 30px 0px;
    background-color: rgb(2, 20, 32);
}
.statementBox {
    vertical-align: top;
}
.statement p{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding-right: 10px;
}
.statement p:nth-child(1){
    width: 40%;
}
.statement p:nth-child(2){
    width: 35%;
}
.statement p:nth-child(3){
    float: right;
    line-height: 30px;
}
.statement p:nth-child(3)::after{
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 30px;
    background:url('../images/技术支持.png') no-repeat;
    background-size: 100%;
    background-position: center;
}